<script lang="ts" setup>
import { ref, type Ref } from 'vue';

const coupon = {
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
};

const coupons: any = ref([coupon]);
const showList: Ref<boolean> = ref(false);
const chosenCoupon = ref(-1)
const disabledCoupons: any = [coupon]

const onChange = (index: number) => {
    showList.value = false;
    chosenCoupon.value = index;
};
const onExchange = (code: any) => {
    coupons.value.push(coupon);
};

function customerClick() {
    window._MEIQIA('showPanel')
}

</script>

<template>

    <div class="my">


        <!-- 优惠券列表 -->
        <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
            <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
                @change="onChange" @exchange="onExchange" />
        </van-popup>

        <header class="my-header">
            <van-image
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E5%B7%B2%E7%99%BB%E5%BD%95/u2805.svg"></van-image>
            <van-image @click="$router.push('/mylogin/set')"
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E5%B7%B2%E7%99%BB%E5%BD%95/u2719.svg"></van-image>
        </header>

        <main class="my-main">
            <div class="my-main-top">
                <div class="my-main-top-left">
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E5%B7%B2%E7%99%BB%E5%BD%95/u2747.svg" />
                    <p>晚风心里吹</p>
                    <p><span style="color: #EA8E05;">Lv.1</span><span
                            style="color: #EC808D;margin-left: 10px;"><van-image
                                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E5%B7%B2%E7%99%BB%E5%BD%95/u2804.svg" />男</span>
                    </p>
                </div>

                <div class="my-main-top-right">
                    <div class="top">
                        <span @click="$router.push({
                            path: '/mylogin/fans',
                            query: {
                                id: '0'
                            }
                        })">
                            <p>104</p>
                            <p>关注</p>
                        </span>
                        <span @click="$router.push({
                            path: '/mylogin/fans',
                            query: {
                                id: '1'
                            }
                        })">
                            <p>6152</p>
                            <p>粉丝</p>
                        </span>
                        <span>
                            <p>6.1万</p>
                            <p>获赞</p>
                        </span>
                    </div>
                    <div class="bottom">
                        <span><span style="color: #999; margin-right: 5px;">个人主页</span><van-image
                                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/u194.svg" /></span>
                    </div>
                </div>
            </div>

            <div class="my-content-top">
                <div class="coupon-title" @click="showList = true">
                    <svg t="1731329199297" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2378" width="42" height="42">
                        <path
                            d="M836.152889 224.009481a75.851852 75.851852 0 0 1 75.851852 75.851852v116.129186a96.009481 96.009481 0 0 0 0 192v116.167111a75.851852 75.851852 0 0 1-75.851852 75.851851H187.847111a75.851852 75.851852 0 0 1-75.851852-75.851851v-116.167111a96.009481 96.009481 0 0 0 0-191.981038v-116.148148a75.851852 75.851852 0 0 1 75.851852-75.851852h648.305778z m-383.469037 138.733038a24.007111 24.007111 0 0 0-33.943704 33.943703l51.313778 51.313778h-46.061037a24.007111 24.007111 0 1 0 0 47.995259h64v32.009482h-64a24.007111 24.007111 0 1 0 0 47.995259h64v80.004741a24.007111 24.007111 0 1 0 48.014222 0l-0.018963-80.023704 64.018963 0.018963a24.007111 24.007111 0 1 0 0-47.995259h-64.018963v-32.009482h64.018963a24.007111 24.007111 0 1 0 0-47.995259h-46.08l51.332741-51.313778 1.744592-1.953185a24.007111 24.007111 0 0 0-35.688296-31.990518l-56.566518 56.566518-1.744593 1.953185-0.986074 1.365334a24.139852 24.139852 0 0 0-2.768593-3.318519z"
                            fill="#FD6112" p-id="2379"></path>
                    </svg>
                    <p style="position: relative;bottom: 5px;right: 5px;">优惠券{{ coupon.available }}张</p>
                </div>
                <div class="gold-title" @click="$router.push('/mylogin/gold')">
                    <svg t="1731329287487" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3528" width="46" height="46">
                        <path d="M443.904 623.104a281.6 278.016 90 1 0 556.032 0 281.6 278.016 90 1 0-556.032 0Z"
                            fill="#E09B40" p-id="3529"></path>
                        <path
                            d="M721.92 604.672m-278.016 0a278.016 278.016 0 1 0 556.032 0 278.016 278.016 0 1 0-556.032 0Z"
                            fill="#FFD151" p-id="3530"></path>
                        <path
                            d="M562.688 740.352l159.744-332.288 33.792-79.36c-11.264-1.536-23.04-2.56-34.304-2.56-153.6 0-278.016 124.416-278.016 278.016 0 71.168 27.136 135.68 70.656 184.832l48.128-48.64z"
                            fill="#FFDD99" p-id="3531"></path>
                        <path
                            d="M721.92 604.672m-231.424 0a231.424 231.424 0 1 0 462.848 0 231.424 231.424 0 1 0-462.848 0Z"
                            fill="#D39548" p-id="3532"></path>
                        <path d="M491.52 612.352a230.912 223.744 0 1 0 461.824 0 230.912 223.744 0 1 0-461.824 0Z"
                            fill="#E6B141" p-id="3533"></path>
                        <path
                            d="M662.016 686.592l33.28 10.752 33.28 6.144 40.448-8.704v13.824l-37.376 12.8-34.816-8.704zM668.672 549.376l33.792-10.752 32.768-6.144 40.96 8.192V527.36l-37.376-13.312-35.328 9.216z"
                            fill="#D39548" p-id="3534"></path>
                        <path
                            d="M687.104 902.144c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584-0.512-5.632-0.512v21.504zM697.344 903.168c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584 0-5.632-0.512v21.504zM707.584 904.192c2.048 0 3.584 0 5.632 0.512v-22.016h-5.632v21.504zM717.312 904.192s0.512 0.512 0 0c2.048 0.512 3.584 0.512 5.632 0.512v-22.016h-5.632v21.504zM727.552 882.688v22.016h5.632V882.176c-1.536 0-3.584 0.512-5.632 0.512zM843.264 876.544c1.536-1.024 3.584-1.536 5.12-2.56l-9.728-16.896c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.896zM851.968 871.936c1.536-1.024 3.584-2.048 5.12-3.072l-9.728-15.872c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.384zM860.672 866.816c1.536-1.024 3.584-2.048 5.12-3.072l-9.216-15.872c-1.536 1.024-3.584 2.048-5.12 2.56l9.216 16.384zM869.376 861.696l4.608-3.072-9.216-15.36c-1.536 1.024-3.072 2.048-5.12 3.072l9.728 15.36zM868.864 841.216l8.704 14.848 4.608-3.072-8.704-14.848c-1.024 1.024-2.56 2.048-4.608 3.072zM559.104 850.944l4.608 3.072 8.704-14.848-4.608-3.072-8.704 14.848zM567.296 857.088l4.608 3.072 9.216-15.36c-1.536-1.024-3.072-2.048-5.12-3.072l-8.704 15.36zM576 862.72l4.608 3.072 9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.216 15.872zM584.704 867.84c1.536 1.024 3.584 1.536 5.12 2.56l9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.728 16.384zM593.408 872.448c1.536 1.024 3.584 2.048 5.12 2.56l9.728-16.896c-1.536-1.024-3.584-1.536-5.12-2.56l-9.728 16.896z"
                            fill="#EFC04B" p-id="3535"></path>
                        <path d="M27.648 408.064a281.6 278.016 90 1 0 556.032 0 281.6 278.016 90 1 0-556.032 0Z"
                            fill="#E09B40" p-id="3536"></path>
                        <path
                            d="M305.664 389.632m-278.016 0a278.016 278.016 0 1 0 556.032 0 278.016 278.016 0 1 0-556.032 0Z"
                            fill="#FFD151" p-id="3537"></path>
                        <path
                            d="M146.432 525.312l159.744-332.288 33.792-79.36c-11.264-1.536-23.04-2.56-34.304-2.56-153.6 0-278.016 124.416-278.016 278.016 0 71.168 27.136 135.68 70.656 184.832l48.128-48.64z"
                            fill="#FFDD99" p-id="3538"></path>
                        <path
                            d="M305.664 389.632m-231.424 0a231.424 231.424 0 1 0 462.848 0 231.424 231.424 0 1 0-462.848 0Z"
                            fill="#D39548" p-id="3539"></path>
                        <path d="M75.264 397.312a230.912 223.744 0 1 0 461.824 0 230.912 223.744 0 1 0-461.824 0Z"
                            fill="#E6B141" p-id="3540"></path>
                        <path
                            d="M245.248 471.552l33.792 10.752 32.768 6.144 40.96-8.192v13.312l-37.376 12.8-35.328-8.704zM252.416 334.336l33.28-10.752 33.28-6.144 40.448 8.192V312.32l-37.376-12.8-34.816 8.704z"
                            fill="#D39548" p-id="3541"></path>
                        <path
                            d="M270.848 687.104c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584-0.512-5.632-0.512v21.504zM281.088 688.128c2.048 0 4.096 0.512 5.632 0.512v-21.504c-1.536 0-3.584 0-5.632-0.512v21.504zM290.816 689.152c2.048 0 3.584 0 5.632 0.512v-22.016h-5.632v21.504zM301.056 689.152s0 0.512 0 0c2.048 0.512 3.584 0.512 5.632 0.512v-22.016h-5.632v21.504zM311.296 667.648v22.016h5.632V667.136c-2.048 0-3.584 0.512-5.632 0.512zM426.496 661.504c1.536-1.024 3.584-1.536 5.12-2.56l-9.728-16.896c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.896zM435.712 656.896c1.536-1.024 3.584-2.048 5.12-3.072l-9.728-15.872c-1.536 1.024-3.584 1.536-5.12 2.56l9.728 16.384zM444.416 651.776c1.536-1.024 3.584-2.048 5.12-3.072l-9.216-15.872c-1.536 1.024-3.584 2.048-5.12 2.56l9.216 16.384zM453.12 646.656l4.608-3.072-9.216-15.36c-1.536 1.024-3.072 2.048-5.12 3.072l9.728 15.36zM452.608 626.176l8.704 14.848 4.608-3.072-8.704-14.848-4.608 3.072zM142.848 635.904l4.608 3.072 8.704-14.848-4.608-3.072-8.704 14.848zM151.04 642.048l4.608 3.072 9.216-15.36c-1.536-1.024-3.072-2.048-5.12-3.072l-8.704 15.36zM159.232 647.68l4.608 3.072 9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.216 15.872zM167.936 652.8c1.536 1.024 3.584 1.536 5.12 2.56l9.728-16.384c-1.536-1.024-3.584-2.048-5.12-2.56l-9.728 16.384zM177.152 657.408c1.536 1.024 3.584 2.048 5.12 2.56l9.728-16.896c-1.536-1.024-3.584-1.536-5.12-2.56l-9.728 16.896z"
                            fill="#EFC04B" p-id="3542"></path>
                    </svg>

                    <p style="position: relative;bottom: 5px;right: 5px;">金币30,000</p>
                </div>
            </div>
            <div class="my-content-main">
                <p style="position: relative; top: 10px;left: 10px; font-size: 14px; font-weight: bold;">我的门票</p>
                <div class="content">
                    <div class="order">
                        <van-image @click="$router.push('/mylogin/order')"
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u333.svg"></van-image>
                        <p>全部门票</p>
                    </div>
                    <div class="order">
                        <van-image @click="$router.push('/mylogin/order')"
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u331.svg"></van-image>
                        <p>待付款</p>
                    </div>
                    <div class="order">
                        <van-image @click="$router.push('/mylogin/order')"
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u332.svg"></van-image>
                        <p>未使用</p>
                    </div>
                    <div class="order">
                        <van-image @click="$router.push('/mylogin/order')"
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u330.svg"></van-image>
                        <p>待评价</p>
                    </div>
                </div>
            </div>
            <div class="my-content-bottom">
                <p style="position: relative; top: 10px;left: 10px; font-size: 14px; font-weight: bold;">基础服务</p>

                <van-grid square>
                    <van-grid-item @click="$router.push('/mylogin/release')"
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u361.svg"
                        text="我要发布" />
                    <van-grid-item @click="$router.push('/mylogin/order')"
                        icon="
                        https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u349.svg" text="酒店订单" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u352.svg"
                        text="我的机票" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u343.svg"
                        text="我的车票" />
                    <van-grid-item @click="$router.push('/mylogin/gold')"
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u340.svg"
                        text="我的金币" />
                    <van-grid-item @click="$router.push('/tourism')"
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u364.svg"
                        text="我的收藏" />
                    <van-grid-item @click="customerClick"
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u358.svg"
                        text="联系客服" />
                    <van-grid-item @click="$router.push('/mylogin/feedback')"
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u337.svg"
                        text="意见反馈" />
                </van-grid>

            </div>

        </main>
    </div>


</template>

<style scoped lang="scss">
.my {
    width: 100%;
    height: 100%;

    .my-header {
        height: 130px;
        background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;

        .van-image {
            width: 18px;
            height: 18px;
            margin-bottom: 20px;

        }
    }

    .my-main {
        height: calc(100% - 50px);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 44%, rgba(247, 247, 247, 1) 98%);
        border-radius: 20px;
        position: relative;
        bottom: 20px;

        .my-main-top {
            display: flex;
            justify-content: space-between;

            .my-main-top-left {
                position: relative;
                left: 20px;
                bottom: 15px;
            }

            .my-main-top-right {
                width: 65%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .top {
                    display: flex;
                    justify-content: space-between;
                    margin-right: 50px;
                }

                .bottom {
                    display: flex;
                    justify-content: end;
                    position: relative;
                    right: 20px;
                    bottom: 25px;
                }
            }
        }

        .my-content-top {
            width: 90%;
            height: 85px;
            background-color: #ffffff;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 10px;

            .coupon-title {
                margin-top: 10px;
            }

            .gold-title {
                margin-top: 10px;
            }
        }

        .my-content-main {
            width: 90%;
            height: 110px;
            background-color: white;
            margin: 10px auto;
            border-radius: 10px;

            .content {
                display: flex;
                justify-content: space-around;
                background-color: white;
                align-items: center;
                height: 100%;

                .van-image {
                    position: relative;
                    left: 7px;
                }
            }


        }

        .my-content-bottom {
            width: 90%;
            height: 205px;
            background-color: white;
            margin: 20px auto;
        }


    }
}
</style>